<template>
  <div class="nav">
    <ul class="nav_item">
      <li v-for="(item, index) in navItems" :key="index">
        <a><router-link :to="item.link">{{ item.name }}</router-link></a>
      </li>
    </ul>
  </div>
</template>

<script>
//引入数据
let leftNavigation = require("@/assets/data/leftNavigation.json");
export default {
  name: "LeftNavigation",
  data() {
    return {
      navItems: leftNavigation
    };
  }
};
</script>

<style scoped>
.nav {
  width: 250px;
  height: 440px;
  background: rgb(32, 31, 31);
  border-right: 1px solid #eaeaea;
  font-size: 16px;
  font-family: "微软雅黑";
  color: #ffffff;
}

.nav .nav_item>li {
  text-align: left;
}

.nav_item {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav_item li {
  line-height: 50px;
  font-weight: bold;
  text-align: center;
}

.nav_item li:hover {
  background-color: #fb8b23;
}

.nav_item li a {
  color: inherit;
  display: block;
  padding-left: 30px;
}

.nav_item li a:hover {
  text-decoration: none;
}
</style>
